<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/resources/templates/base_template.xhtml">

        <ui:define name="body">

            <h:form id="form_jsId">

                <h:panelGrid columns="2" styleClass="cellaligntop">

                    <p:dataTable id="datatable_jsId" value="#{serverDataModel}" var="user" widgetVar="datatableWidget"
                                 scrollWidth="1000" scrollable="true" scrollHeight="544"
                                 paginator="true" paginatorPosition="bottom" rows="25" lazy="true">

                        <p:column id="idColumn_jsId" headerText="ID" width="50" sortBy="#{user.id}">
                            <h:outputText value="#{user.id}"/>
                        </p:column>

                        <p:column id="firstNameColumn_jsId" headerText="First Name" width="120" sortBy="#{user.firstName}" filterBy="#{user.firstName}">
                            <h:outputText value="#{user.firstName}"/>
                        </p:column>

                        <p:column id="lastNameColumn_jsId" headerText="Last Name" width="120" sortBy="#{user.lastName}" filterBy="#{user.lastName}"> 
                            <h:outputText value="#{user.lastName}"/>
                        </p:column>

                        <p:column headerText="Street" width="200">
                            <h:outputText value="#{user.street}"/>
                        </p:column>

                        <p:column headerText="Home Number" width="200">
                            <h:outputText value="#{user.houseNum}"/>
                        </p:column>

                        <p:column id="cityColumn_jsId" headerText="City" width="200" sortBy="#{user.city}"
                                  filterBy="#{user.city}" filterOptions="#{serverDataModel.filteredCities}">

                            <h:outputText value="#{user.city}"/>
                        </p:column>

                        <p:column headerText="ZIP Code" width="200">
                            <h:outputText value="#{user.zipCode}"/>
                        </p:column>

                        <p:column headerText="Phone" width="200">
                            <h:outputText value="#{user.phone}"/>
                        </p:column>

                        <p:column headerText="Mobile" width="200">
                            <h:outputText value="#{user.mobile}"/>
                        </p:column>

                        <p:column headerText="Fax" width="200">
                            <h:outputText value="#{user.fax}"/>
                        </p:column>

                        <p:column headerText="SSN" width="200">
                            <h:outputText value="#{user.ssn}"/>
                        </p:column>

                        <p:column headerText="Birth Date" width="200">
                            <h:outputText value="#{user.birthDate}">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Hire Date" width="200">
                            <h:outputText value="#{user.hireDate}">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Enabled" width="200">
                            <h:outputText value="#{user.enabled}"/>
                        </p:column>

                    </p:dataTable>

                    <p:panel header="Description" >
                        <p>Datatable with sorting, filtering and pagination implemented on database with lazy data model</p>
                    </p:panel>

                </h:panelGrid>


            </h:form>

        </ui:define>

    </ui:composition>

</html>